<template>
  <view class="douyin-mount">
    <image
      src="https://img.alicdn.com/imgextra/i2/1888948409/O1CN0137JvSE2BzNT4IZA8K_!!1888948409.png"
      mode="widthFix"
      class="douyin-mount-image"
    />

    <view class="douyin-mount-container">
      <view class="douyin-mount-content">
        <Title title="填写挂载信息" :custom-style="{
          'marginBottom': '24rpx',
          'marginTop': '0',
          'fontSize': '36rpx',
          'fontWeight': '700',
          'color': '#333'
        }"></Title>

        <view class="input-item">
          <view class="input-title">*抖音号:</view>
          <view class="input-box flex ac">
            <u-input v-model="formData.douyin" placeholder="请输入抖音号" type="text" :border="false" />
          </view>
        </view>

        <view class="input-item">
          <view class="input-title">*粉丝数量:</view>
          <view class="input-box flex ac">
            <u-input v-model="formData.fansNum" placeholder="请输入粉丝数量" type="text" :border="false" />
          </view>
        </view>

        <view class="input-item">
          <view class="input-title">*真实姓名:</view>
          <view class="input-box flex ac">
            <u-input v-model="formData.rela_name" placeholder="请输入真实姓名" type="text" :border="false" />
          </view>
        </view>
        
        <view class="input-item">
          <view class="input-title2">已经实名的账号:<text style="color: #fd3666;padding-left: 22rpx;">用实名人的身份证信息加白</text></view>
          <view class="input-title2">没实名的账号:<text style="color: #fd3666;padding-left: 22rpx;">可以填同一个身份信息加白（姓名与身份证 号：真实、相对应的）</text></view>
        </view>

        <view class="input-item">
          <view class="input-title">*身份证号:</view>
          <view class="input-box flex ac">
            <u-input v-model="formData.no_number" placeholder="请输入身份证号" maxLength="18" type="text" :border="false" />
          </view>
        </view>
      </view>

      <view class="footer-btn">
        <view class="btn1 flex ac jc" @click="sumbit">
          <text style="margin-left: 6rpx;">立即提交</text>
        </view>
      </view>

    </view>
    
  </view>
</template>

<script>
  import Title from '@/components/title/title.vue';
  import { addDouyinMount } from '@/api/user';
  export default {
    components: {
      Title
    },
    data() {
      return {
        formData: {
          douyin: '',
          fansNum: '',
          rela_name: '',
          no_number: ''
        }
      }
    },

    methods: {
      sumbit() {
        let formData = this.formData;
        if (!formData.douyin) {
          return uni.showToast({
            title: '请输入抖音号',
            icon: 'none'
          })
        }

        if (!formData.fansNum) {
          return uni.showToast({
            title: '请输入粉丝数量',
            icon: 'none'
          })
        }

        if (!formData.rela_name) {
          return uni.showToast({
            title: '请输入真实姓名',
            icon: 'none'
          })
        }

        if (!formData.no_number) {
          return uni.showToast({
            title: '请输入身份证号码',
            icon: 'none'
          })
        }

        let regex = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
        if (!regex.test(formData.no_number)) {
          return uni.showToast({
            title: '请输入正确的身份证号码',
            icon: 'none'
          })
        }
        uni.showLoading({
          title: '提交中',
          mask: true
        })
        addDouyinMount(this.formData).then(result => {
          uni.hideLoading();
          if (result && result.code === 200) {
            uni.showToast({
              title: '添加成功！',
              icon: 'success'
            });
            setTimeout(() => {
              uni.redirectTo({
                url: '/pages/douyinMount/application/record'
              })
            }, 2000);
          }
        })
      }
    }
  }
</script>

<style lang="scss">

  .douyin-mount{
    min-height: 100vh;
    position: relative;
    padding: 580rpx 24rpx 32rpx 24rpx;
    background: linear-gradient(to bottom, #56d39d, #bdd1c8);

    .douyin-mount-container{
      z-index: 99;

      .douyin-mount-content{
        padding: 32rpx 24rpx;
        border-radius: 20rpx;
        background-color: #ffffff;

        .input-item{
          margin-top: 32rpx;

          .input-title{
            line-height: 72rpx;
            height: 72rpx;
            font-size: 30rpx;
            color: #2a2a2a;
          }

          .input-title2{
            line-height: 36rpx;
            font-size: 24rpx;
          }

          .input-box{
            height: 98rpx;
            background: #f7f7f7;
            border-radius: 16rpx;
            border: 2rpx solid #ececec;
            padding: 0 44rpx;
          }

        }
      }
    }

    .footer-btn{
      padding: 64rpx 0;

      .btn1{
        width: 100%;
        height: 98rpx;
        background: $uni-color-primary;
        border-radius: 22rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
      }
    }
  }

  .douyin-mount-image{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
</style>
